<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta charset="ISO-8859-1">
    <title>超市商品管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>

<div class="container my-2">
    <h1>商品列表</h1>

    <a th:href="@{/showSupermarketForm}" class="btn btn-primary btn-sm mb-3"> 新增 </a>
    <h1  class="text-primary"></h1>


    <nav class="navbar navbar-light bg-light">
        <form id="query-form" action="/query" method="get">
            <h6 class="text-secondary">查找商品</h6><input type="text" id="name-input" name="inpname" placeholder="商品名">
            <button type="button" class="btn btn-info"onclick="querySupermarket()">搜索</button>
        </form>
        <hr>

        <a th:href="@{/}"> 回到商品列表</a>

        <script>
            function querySupermarket() {
                var goodsName = document.getElementById("name-input").value;
                var url = "/query" + encodeURIComponent(goodsName);
                window.location.href = url;
            }
        </script>
    </nav>

    <table border="1" class="table table-striped table-responsive-md">
        <thead>
        <tr>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=goodsName&sortDir=' + ${reverseSortDir}}">
                    商品名称</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=price&sortDir=' + ${reverseSortDir}}">
                    商品价格(元)</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=types&sortDir=' + ${reverseSortDir}}">
                    商品类型</a>
            </th>
            <th> 功能 </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="supermarket : ${listSupermarket}">
            <td th:text="${supermarket.goodsName}"></td>
            <td th:text="${supermarket.price}"></td>
            <td th:text="${supermarket.types}"></td>
            <td> <a th:href="@{/showFormForUpdate/{id}(id=${supermarket.id})}" class="btn btn-primary">更新</a>
                <a th:href="@{/deleteSupermarket/{id}(id=${supermarket.id})}" class="btn btn-danger">删除</a>
            </td>
        </tr>
        </tbody>
    </table>


    <div th:if = "${totalPages > 1}">
        <div class = "row col-sm-10">
            <div class = "col-sm-3">
                商品总数: [[${totalItems}]]
            </div>
            <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>
            </div>
<!--            <div class = "col-sm-1">-->
<!--                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">上一页</a>-->
<!--                <span th:unless="${currentPage < totalPages}">Next</span>-->
<!--            </div>-->

<!--            <div class="col-sm-1">-->
<!--                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">下一页</a>-->
<!--                <span th:unless="${currentPage < totalPages}">Last</span>-->
<!--            </div>-->
        </div>
    </div>
</div>
</body>

</html>

